<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      :height="height"
      v-loading="tableLoading"
      :max-height="maxHeight"
      :header-cell-style="headerCellStyle"
      border
    >
      <el-table-column
        v-if="isShowIndex"
        type="index"
        :label="'序号'"
        align="center"
        width="60"
      />

      <el-table-column
        v-for="(column, index) in tableConfig"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
        :fixed="column.fixed"
        :sortable="column.sortable"
        :render-header="column.renderHeader"
        align="center"
      >
        <!-- 只有当没有子列时才显示默认插槽内容 -->
        <template
          v-if="!column.children || column.children.length === 0"
          #default="scope"
        >
          <div :style="column.headerRowStyle">
            <slot :name="column.slotName" :row="scope.row">
              {{ scope.row[column.prop] }}
            </slot>
          </div>
          <template v-if="column.render">
            <RenderDom
              :row="scope.row"
              :render="column.render"
              :sortable="column.sortable"
            />
          </template>
        </template>

        <!-- 子列 -->
        <el-table-column
          v-for="(column2, index2) in column.children || []"
          :key="`${column2.prop}-${index2}`"
          :prop="column2.prop"
          :label="column2.label"
          :width="column2.width"
          align="center"
        >
          <template #default="scope2">
            <slot :name="column2.slotName" :row="scope2.row">
              {{ scope2.row[column2.prop] }}
            </slot>
            <template v-if="column2.render">
              <RenderDom
                :row="scope2.row"
                :render="column2.render"
                :sortable="column2.sortable"
              />
            </template>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { h, defineComponent } from "vue";

// Props定义
const props = defineProps({
  isShowIndex: {
    type: Boolean,
    default: false,
  },
  headerCellStyle: {
    type: Object,
  },
  tableData: {
    type: Array,
    default() {
      return [];
    },
  },
  tableLoading: {
    type: Boolean,
    default: false,
  },
  tableConfig: {
    type: Array,
    required: true,
  },
  height: {
    type: String,
  },
  maxHeight: {
    type: String,
  },
  showIndexColumn: {
    type: Boolean,
    default: false,
  },
});

// 扁平化列配置
const flatColumns = computed(() => {
  const result = [];
  props.tableConfig.forEach((column) => {
    if (column.children && column.children.length > 0) {
      // 如果有子列，添加子列
      column.children.forEach((childColumn) => {
        result.push({
          ...childColumn,
          width: column.width, // 使用父列的宽度
        });
      });
    } else {
      // 如果没有子列，添加父列
      result.push(column);
    }
  });
  return result;
});

// 函数式组件定义
const RenderDom = defineComponent({
  name: "RenderDom",
  props: {
    render: {
      type: Function,
      required: true,
    },
    row: {
      type: Object,
      required: true,
    },
    sortable: {
      type: [Boolean, String, Function],
      default: false,
    },
  },
  setup(props) {
    return () => props.render(h, props.row);
  },
});
</script>

<style scoped lang="less"></style>
